<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 500px;
				height: 500px;
				border: 1px solid red;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div id="surround" style="width: 500px;height: 500px;border: 1px solid red;position: relative;"></div>
	</body>
	<script type="text/javascript">
		var a = 140,
			b = 140,
			r = 100;
		function initdContainer(width,height,left,top,r){
			let div = document.createElement("div");
			div.style.width=width+"px";
			div.style.height = height+"px";
			div.style.border="1px solid red";
			div.style.position="relative";
			div.setAttribute("id","surround")
			document.body.appendChild(div)
			window.a = 140;
			window.b = 140;
		}
		
		
		// for (var times = 0; times < 60; times++) {
		// 	if (times % 10 == 0) {
		// 		var hudu = (2 * Math.PI / 360) * 6 * times;
		// 		var X = a + Math.sin(hudu) * r;
		// 		var Y = b - Math.cos(hudu) * r
		// 		console.log(X, Y)
		// 		//  注意此处是“-”号，因为我们要得到的Y是相对于（0,0）而言的。
		// 		//创建<!DOCTYPE HTML>
		// 		let item = document.createElement("div");
		// 		item.setAttribute("class", "item");
		// 		item.style.top = Y + "px";
		// 		item.style.left = X + "px";
		// 		item.style.width = itemSize
		// 		item.style.height = itemSize;
		// 		item.style.border = "1px solid blue"
		// 		item.style.backgroundImage="url(https://img2.woyaogexing.com/2022/06/28/c64b1951d870dc53!400x400.jpg)center 100% 100%"
		// 		item.style.position = "fixed"
		// 		item.style.borderRadius = itemSize
		// 		item.innerHTML=times;
		// 		document.body.appendChild(item)
		// 	}
		// }
		
		function render(itemSize,r,count){
			let finalItemSize = itemSize+"px";
			let i=0;
			let timesTarget = count;
			let yuan = 6*count;
			
			//边框距离
			let a = 140,b=140;
			
			for (var times = 0; times < timesTarget; times++) {
				//if (times % 3 == 0) {
					var hudu = (2 * Math.PI / yuan) * 6 * times;
					var X = a + Math.sin(hudu) * r;
					var Y = b - Math.cos(hudu) * r
					console.log(X, Y)
					//  注意此处是“-”号，因为我们要得到的Y是相对于（0,0）而言的。
					let item = document.createElement("div");
					item.setAttribute("class", "item");
					item.style.top = Y + "px";
					item.style.left = X + "px";
					item.style.width = finalItemSize
					item.style.height = finalItemSize;
					item.style.border = "1px solid blue"
					item.style.backgroundImage="url(https://img2.woyaogexing.com/2022/06/28/c64b1951d870dc53!400x400.jpg)"
					item.style.backgroundSize="100% 100%"
					item.style.position = "absolute"
					item.style.borderRadius = finalItemSize
					//item.innerHTML=times;
					document.getElementById("surround").appendChild(item)
					//document.body.appendChild(item)
					i++;
				//}
			}
		}
		//render(40,140,18)
	</script>
</html>
